<template>
  <div class="sidebar">
    <div class="head-img" @click="handleLogin">
      <img class="avatar" :src="userInfo.avatar" alt="">
    </div>
    <h1 class="name">{{ userInfo.username }}</h1>
    <p class="number" v-if="userInfo.student_number">学号：{{ userInfo.student_number }}</p>
    <div class="user">
      <div class="item" @click="handleLogin">
        <img class="icon" src="@/assets/user.png" alt="">
        <div class="info">
          <div class="label">个人信息</div>
          <div class="hint"> Information</div>
        </div>
        <div class="user-info">
          <div class="user-item">
            <img src="@/assets/denglu-copy@2x.png" alt="">
            <div class="txt">姓名：{{ userInfo.username }}</div>
          </div>
          <div class="user-item">
            <img src="@/assets/xiangqing@2x.png" alt="">
            <div class="txt">账号：{{ userInfo.student_number || '未知' }}</div>
          </div>
        </div>
      </div>
      <div class="item" @click="logOut">
        <img class="icon" src="@/assets/logout.png" alt="">
        <div class="info">
          <div class="label">退出登录</div>
          <div class="hint">Log Out</div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="menu">
      <div class="item" v-for="item in navs" @click="() => $router.push(item.path)" :key="item.label"
        :class="{ active: item.active }">
        <img class="icon" :src="item.active ? item.activeIcon : item.defaultIcon" alt="">
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores/authStore';
import { storeToRefs } from 'pinia'; // 导入 storeToRefs 
const authStore = useAuthStore();
const { userInfo } = storeToRefs(authStore); // 使用 storeToRefs 解构 
const route = useRoute();
const navs = computed(() => {
  // 1. 学生
  // 2. 老师
  let id = userInfo.value.group_id
  if (id === 2) {
    return [menus.value[0], menus.value[1]]
  } else if (id === 1) {
    return [menus.value[2]]
  }
  return []

});
const menus = ref([
  {
    defaultIcon: new URL('@/assets/icon1_default.png', import.meta.url).href,
    activeIcon: new URL('@/assets/icon1_select.png', import.meta.url).href,
    label: '报告库',
    active: false,
    path: '/reportLibrary',
  },
  {
    defaultIcon: new URL('@/assets/icon2_default.png', import.meta.url).href,
    activeIcon: new URL('@/assets/icon2_select.png', import.meta.url).href,
    label: '报告管理',
    active: false,
    path: '/reportManagement',
  },
  {
    defaultIcon: new URL('@/assets/icon1_default.png', import.meta.url).href,
    activeIcon: new URL('@/assets/icon1_select.png', import.meta.url).href,
    label: '我的报告',
    active: false,
    path: '/myReport',
  },
]);
onMounted(() => {
  // 初始化 active 状态
  console.log(userInfo.value);

  if (!userInfo.value.username) {
    if (localStorage.getItem('userInfo')) {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      authStore.setUserInfo(userInfo);
    }
  }
})
const handleLogin = () => {
  if (!localStorage.getItem('token')) {
    const authStore = useAuthStore();
    authStore.showLoginModal();
  }
}
// 监听路由变化，更新 active 状态 
// 同时监听 route.path 和另一个响应式值 (如：userStore.id)
watch(
  [() => route.path, () => userInfo], // 监听数组
  ([newPath, newId], [oldPath, oldId]) => {
    // 第一个回调参数是新值数组，第二个是旧值数组
    console.log('路由变化:', newPath);

    menus.value.forEach(item => {
      item.active = newPath === item.path
    })
  },
  { immediate: true }
)
const logOut = () => {
  ElMessageBox.alert('确定退出登录么？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    callback: (action) => {
      if (action !== 'confirm') return;
      authStore.clearUserInfo();
      localStorage.clear();
      window.location.reload(); // 刷新页面
    },
  })
}
</script>
<style lang="less" scoped>
.sidebar {
  width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 27px;
  box-sizing: border-box;
  transition: background 0.3s ease;

  &:hover {
    // background: linear-gradient(135deg, #ffffff, #f5f5f5);
  }

  .head-img {
    width: 156px;
    cursor: pointer;
    height: 156px;
    background: #F7F8FD;
    background: url('@/assets/head.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;

    .avatar {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%
    }

    &:hover {
      transform: scale(1.05);
    }
  }

  .name {
    font-size: 18px;
    color: #333;
    margin-top: 24px;
    font-weight: bold;
  }

  .number {
    font-size: 14px;
    color: #666666;
    margin-top: 10px;
  }

  .user {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 40px 0;

    .item {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 8px;
      transition: all 0.3s ease;
      padding: 8px; // 预先设置 padding，避免 hover 时尺寸变化
      border-radius: 8px; // 预先设置圆角，避免 hover 时尺寸变化
      position: relative;

      .user-info {
        min-width: 224px;
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #C4C3C3;
        box-sizing: border-box;
        position: absolute;
        padding: 20px 30px 20px 10px;
        left: 0;
        bottom: -200%;
        z-index: 10;
        display: none;
        user-select: none;

        .user-item {
          display: flex;
          font-size: 14px;
          color: #333;
          line-height: 18px;
          align-items: center;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          img {
            width: 16px;
            height: 16px;
            object-fit: scale-down;
            margin-right: 10px;
          }
        }
      }

      &:hover {
        background-color: #f5f5f5;

        .user-info {
          display: block;
        }

        // transform: translateY(-2px);
        // 移除 padding 和 border-radius 的变化
      }

      .icon {
        width: 20px;
        height: 20px;
        object-fit: scale-down;
      }

      .label {
        font-size: 17px;
        color: #666;
        font-weight: bold;
        margin-bottom: 2px;
      }

      .hint {
        font-size: 10px;
        color: #999999;
      }
    }
  }

  .line {
    width: 200px;
    height: 1px;
    border-bottom: 1px dashed #E5E5E5;
    transition: width 0.3s ease;

    &:hover {
      width: 220px;
    }
  }

  .menu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;

    .item {
      width: 120px;
      height: 120px;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: all 0.3s ease;

      &:hover {
        background-color: #f5f5f5;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);

        .icon {
          transform: rotate(10deg);
        }
      }

      .icon {
        width: 52px;
        height: 52px;
        object-fit: scale-down;
        transition: transform 0.3s ease;
      }

      .label {
        font-size: 16px;
        color: #333;
        margin-top: 10px;
      }

      &.active {
        background-color: #2D53F8;

        .label {
          color: #fff;
        }

        &:hover {
          background-color: #1a3bbf;
        }
      }
    }
  }
}
</style>